import React from 'react'
import { Tabs } from 'expo-router'
import { ioniconsRector } from '@/constants/ionicons'
import IconByTabBar from '@/components/base/icon.tabBar'
import { useColorScheme } from 'react-native'
import { Colors } from 'react-native-ui-lib'
import { useTranslation } from 'react-i18next'
import { useLoadedFontFamilyByAction } from '@/hooks/font'
import { useKeyboard } from '@/hooks/keyboard'
const _layout: React.FC<NavigationProps.NavProps<typeof Tabs, keyof typeof NavigationProps.NavigationSystem, typeof Tabs.Screen>> = ({
  option = {
    screenOptions: ({ route }) => ({
      headerShown: false,
      tabBarIcon: ({ color, size, focused }) => (
        <IconByTabBar routeItem={ioniconsRector} route={route.name} color={color} size={size} focused={focused} />
      ),
      tabBarActiveTintColor: useColorScheme() == 'dark' ? Colors.white : Colors.black,
      tabBarLabelStyle: { ...useLoadedFontFamilyByAction('SPACE_MONO') },
      tabBarStyle: { display: useKeyboard().keyboardVisible ? "none" : "flex" },
    }),
    initialRouteName: 'index'
  },
  items = {
    SETTING: { options: { headerShown: false, title: useTranslation().t('1000') }, name: 'setting' },
    TASK: { options: { headerShown: false, title: useTranslation().t('1002') }, name: 'index' },
    MINE: { options: { headerShown: false, title: useTranslation().t('1001') }, name: 'mine' },
  },
}) => {
  return (
    <Tabs {...option} >
      {Object.values(items).map((item) => (
        <Tabs.Screen key={item.name} {...item} />
      ))}
    </Tabs>
  )
}

export default _layout